<template>
	<view class="page">
		<status-bar></status-bar>
		<!-- 头部 -->
		<view class="head-wrapper">
			<view @click="gotoUserInfo">
				<cl-avatar v-if="photo == null" src="/static/icon/default-head.png" :size="50"></cl-avatar>
				<cl-avatar v-else :src="photo" :size="50"></cl-avatar>
			</view>
			<view class="search-wrapper" @click="search">
				<image src="/static/icon/search.png" class="search-icon"></image>
			</view>
		</view>
		<!-- 滚动栏 -->
		<cl-tabs v-model="tabIndex" type="swiper" lazy :labels="labels" @tab-change="tabChange" @scrolltolower='scrolltolower'
		 @onRefresh="refresh" ref="tabs">
			<template v-slot="{ index }">
				<!-- 轮播图 -->
				<view class="swiper-wrapper" v-if="tabIndex == 0 & hasData">
					<swiper indicator-dots="true" indicator-active-color="white" autoplay="true">
						<swiper-item @tap="click(item.lotId)" v-for="item in slideData" :key="item.lotId">
							<view class="swiper-content-wrapper">
								<image class="swiper-image" mode="aspectFill" :src="item.imageUrl"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- 拍品卡片列表 -->
				<view class="card-wrapper" v-if="hasData">
					<!-- 拍品卡片 -->
					<ap-card v-if="tabIndex == 0" v-for="item in lotCards" :key="item.lotId" :cardValue="item" class="card" @tapCard="click(item.lotId)"></ap-card>
					<ap-card v-if="tabIndex == 1" v-for="item in phoneCards" :key="item.lotId" :cardValue="item" class="card" @tapCard="click(item.lotId)"></ap-card>
					<ap-card v-if="tabIndex == 2" v-for="item in computerCards" :key="item.lotId" :cardValue="item" class="card"
					 @tapCard="click(item.lotId)"></ap-card>
					<ap-card v-if="tabIndex == 3" v-for="item in digitalCards" :key="item.lotId" :cardValue="item" class="card"
					 @tapCard="click(item.lotId)"></ap-card>
					<ap-card v-if="tabIndex == 4" v-for="item in bookCards" :key="item.lotId" :cardValue="item" class="card" @tapCard="click(item.lotId)"></ap-card>
					<ap-card v-if="tabIndex == 5" v-for="item in otherCards" :key="item.lotId" :cardValue="item" class="card" @tapCard="click(item.lotId)"></ap-card>
					<cl-loadmore background-color="#fff" :loading="loading" :finish="finish">没有更多了</cl-loadmore>
				</view>
				<view v-else class="tip-wrapper">
					<text>没有找到数据，请刷新重试</text>
				</view>
			</template>
		</cl-tabs>
	</view>
</template>

<script>
	/*引入手机状态栏留空组件*/
	import statusBar from "@/components/status-bar/status-bar.vue"
	// 拍品卡片
	import apCard from "@/components/ap-card/ap-card.vue";
	export default {
		components: {
			statusBar,
			apCard
		},
		data() {
			return {
				photo: null,
				hasData: false,
				tabIndex: 0,
				labels: [{
						label: "首页"
					},
					{
						label: "手机"
					},
					{
						label: "电脑"
					},
					{
						label: "数码"
					},
					{
						label: "图书"
					},
					{
						label: "其他"
					}
				],
				// 轮播图数据
				slideData: [],
				lotCards: [],
				phoneCards: [],
				computerCards: [],
				digitalCards: [],
				bookCards: [],
				otherCards: [],
				lastCardId: [0, 0, 0, 0, 0, 0, 0],
				loading: false,
				finish: false
			}
		},
		methods: {
			gotoUserInfo() {
				if (this.$common.hasLogin) {
					uni.navigateTo({
						url: "../userInfo/userInfo?uid=" + this.$common.user.uid
					})
				} else {
					uni.navigateTo({
						url: "../login/login?url=index"
					})
				}
			},
			search() {
				uni.navigateTo({
					url: "../search/search"
				})
			},
			tabChange() {
				this.$refs.tabs.setRefresher(true);
				switch (this.tabIndex) {
					case 1:
						if (this.phoneCards.length <= 0) {
							this.requestUrl(this.$serverUrl + "lots?type=1", 1);
						}
						break;
					case 2:
						if (this.computerCards.length <= 0) {
							this.requestUrl(this.$serverUrl + "lots?type=2", 2);
						}
						break;
					case 3:
						if (this.digitalCards.length <= 0) {
							this.requestUrl(this.$serverUrl + "lots?type=3", 3);
						}
						break;
					case 4:
						if (this.bookCards.length <= 0) {
							this.requestUrl(this.$serverUrl + "lots?type=4", 4);
						}
						break;
					case 5:
						if (this.otherCards.length <= 0) {
							this.requestUrl(this.$serverUrl + "lots?type=5", 5);
						}
						break;
					default:
						if (this.lotCards.length <= 0) {
							this.requestUrl(this.$serverUrl + "lots", this.tabIndex);
						}
				}
			},
			click(lotId) {
				uni.navigateTo({
					url: "../lotDetail/lotDetail?lotId=" + lotId,
					fail: (e) => {
						console.log(e);
					}
				})
			},
			// 网络请求是否成功的判断
			checkSucess(res) {
				let isSuccess = false;
				if (res.data.statusCode == "200") {
					if (res.data.msg == "success") {
						isSuccess = true;
					}
				}
				return isSuccess;
			},
			// 请求网络（特殊），获取对应tab下的内容
			requestUrl(url, type) {
				uni.request({
					url: url,
					data: {
						pageSize: 8
					},
					method: "GET",
					success: (res) => {
						if (this.checkSucess(res)) {
							// 没有内容更改状态
							if (res.data.data.length == 0) {
								this.goNoMore()
								return;
							}
							this.handleLotImages(res);
							this.handlePhoto(res);
							let isNoMore = false;
							// 将数据加载到对应位置，并记录最后一条的lotId
							switch (type) {
								case 1:
									this.phoneCards = this.phoneCards.concat(res.data.data);
									this.lastCardId[type] = this.phoneCards[this.phoneCards.length - 1].lotId;
									if (this.phoneCards.length <= 1) {
										isNoMore = true;
									} else {
										isNoMore = false;
									}
									break;
								case 2:
									this.computerCards = this.computerCards.concat(res.data.data);
									this.lastCardId[type] = this.computerCards[this.computerCards.length - 1].lotId;
									if (this.computerCards.length <= 1) {
										isNoMore = true;
									} else {
										isNoMore = false;
									}
									break;
								case 3:
									this.digitalCards = this.digitalCards.concat(res.data.data);
									this.lastCardId[type] = this.digitalCards[this.digitalCards.length - 1].lotId;
									if (this.digitalCards.length <= 1) {
										isNoMore = true;
									} else {
										isNoMore = false;
									}
									break;
								case 4:
									this.bookCards = this.bookCards.concat(res.data.data);
									this.lastCardId[type] = this.bookCards[this.bookCards.length - 1].lotId;
									if (this.bookCards.length <= 1) {
										isNoMore = true;
									} else {
										isNoMore = false;
									}
									break;
								case 5:
									this.otherCards = this.otherCards.concat(res.data.data);
									this.lastCardId[type] = this.otherCards[this.otherCards.length - 1].lotId;
									if (this.otherCards.length <= 1) {
										isNoMore = true;
									} else {
										isNoMore = false;
									}
									break;
								default:
									this.lotCards = this.lotCards.concat(res.data.data);
									this.lastCardId[type] = this.lotCards[this.lotCards.length - 1].lotId;
									if (this.lotCards.length <= 1) {
										isNoMore = true;
									} else {
										isNoMore = false;
									}
							}
							this.hasData = true;
							setTimeout(() => {
								this.complete();
							}, 500)
							if (isNoMore) {
								this.goNoMore()
							} else {
								this.goStart();
							}
						} else {

						}
					}
				})
			},
			// 初次加载函数
			loadContent() {
				// 进入页面加载初数据
				this.$common.request(this.$serverUrl + "home-slider", null, "GET", this.successCallbackBySwiper);
				this.requestUrl(this.$serverUrl + "lots", this.tabIndex);
			},
			// 加载更多
			loadMore(type) {
				this.goLoading()
				setTimeout(() => {
					switch (type) {
						case 1, 2, 3, 4, 5:
							this.requestUrl(this.$serverUrl + "lots?type=" + type + "&lastLotId=" + this.lastCardId[type], type);
							break;
						default:
							this.requestUrl(this.$serverUrl + "lots?lastLotId=" + this.lastCardId[type], type);
					}
				}, 500)
			},
			// 请求Swiper成功回调
			successCallbackBySwiper(res) {
				if (this.checkSucess) {
					this.handleSwiperImages(res);
					this.slideData = res.data.data;
				}
			},
			// 处理头像
			handlePhoto(res) {
				let data = res.data.data;
				for (let i = 0; i < data.length; i++) {
					let photo = data[i].photo;
					if (photo == null || photo == "") {
						res.data.data[i].photo = "/static/icon/head-icon.jpg";
						continue;
					}
					res.data.data[i].photo = "http://localhost:8081/photo/" + photo;
				}
			},
			handleLotImages(res) {
				// 处理图片地址
				for (let j = 0; j < res.data.data.length; j++) {
					if (res.data.data[j].images != null) {
						let image = res.data.data[j].images.split("?");
						for (let i = 0; i < image.length; i++) {
							image[i] = "http://localhost:8081/image/" + res.data.data[j].lotId + "/" + image[i];
						}
						res.data.data[j].images = image;
					}
				}
			},
			handleSwiperImages(res) {
				// 处理图片地址
				for (let j = 0; j < res.data.data.length; j++) {
					if (res.data.data[j].imageUrl != null) {
						let image = res.data.data[j].imageUrl.split("?");
						res.data.data[j].imageUrl = "http://localhost:8081/image/" + res.data.data[j].lotId + "/" + image[0];
					} else {
						res.data.data[j].imageUrl = "/static/cache/placeholder_image.jpg";
					}
				}
			},
			// 下拉刷新事件
			refresh({
				complete
			}) {
				this.complete = complete;
				let type = this.tabIndex;
				if (type == 0) {
					this.lotCards = [];
					this.requestUrl(this.$serverUrl + "lots", type);
				} else if (type == 1) {
					this.phoneCards = [];
					this.requestUrl(this.$serverUrl + "lots?type=1", type);
				} else if (type == 2) {
					this.computerCards = [];
					this.requestUrl(this.$serverUrl + "lots?type=2", type);
				} else if (type == 3) {
					this.digitalCards = [];
					this.requestUrl(this.$serverUrl + "lots?type=3", type);
				} else if (type == 4) {
					this.bookCards = [];
					this.requestUrl(this.$serverUrl + "lots?type=4", type);
				} else if (type == 5) {
					this.otherCards = [];
					this.requestUrl(this.$serverUrl + "lots?type=5", type);
				}
			},
			complete() {

			},
			// 滑动到底部事件
			scrolltolower() {
				if (!this.hasData) {
					return;
				}
				this.goStart();
				this.loadMore(this.tabIndex);
			},
			goStart() {
				this.loading = false;
				this.finish = false;
			},
			goLoading() {
				this.loading = true;
			},
			goNoMore() {
				this.finish = true;
			}
		},
		onLoad() {
			this.loadContent();
		},
		onShow() {
			this.$common.setPagePath(this.$mp.page.route)
			this.photo = this.$common.user.photo;
		}
	}
</script>

<style lang="scss">
	@import url("index.css");

	/deep/ .cl-tabs {
		height: calc(100% - 104rpx);
		/* #ifdef APP-PLUS */
		height: calc(100% - 118rpx - var(--status-bar-height));

		/* #endif */
		&__bar {
			background-color: $uni-color-primary;
			color: #B5DCFB;
			padding: 0 16rpx 20rpx 16rpx;
			border: none;

			&-li {
				height: 30px;

				&.active {
					color: #FFFFFF;
				}
			}
		}

		&__swiper>.uni-swiper-wrapper {
			border-radius: 0;
			box-shadow: 0 5px 11px rgba(0, 0, 0, 0.05);
		}

		&__pane {
			background-color: #F2F1F6;
		}
	}

	/deep/ .cl-tabs__label {
		transform: scale(1);
		transition: transform 0.2s;
	}

	/deep/ .active .cl-tabs__label {
		transform: scale(1.2);
		transition: transform 0.2s;
	}

	/deep/ .cl-divider__text {
		background-color: #F2F1F6 !important;
	}
</style>
